<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link href="/static/css/bootstrap.min.css" rel="stylesheet">
	<script src="/static/js/jquery-1.11.1.min.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
	<script src="/static/js/app.js"></script>
	<script src="/static/js/jquery.validate.min.js"></script>
	<script src="/static/js/messages_zh.js"></script>
	<script src="/static/js/additional-methods.js"></script>

</head>
<body>
	<div style="width: 30%;margin: auto;margin-top: 100px;">
		<div class="panel panel-success">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-user"></span>
				<span>注册图书系统</span>
			</div>
			<div class="panel-body">
				<div class="alert  alert-success">注册成功！！<button class="close" data-dismiss="alert">&times;</button></div>
				<form class="form-horizontal">
					<div class="form-group">
						<label class="control-label col-xs-2">昵称</label>
						<div class="col-xs-9">
							<div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </span>
								<input type="text" class="form-control" name="name">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-2">账号</label>
						<div class="col-xs-9">
							<div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </span>
								<input type="text" class="form-control" name="login">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-2">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
						<div class="col-xs-9">
							<div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </span>
								<input type="password" class="form-control" name="password" >
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="panel-footer">
				<button type="button" class="btn btn-primary pull-right" id="login">返回登录</button>
				<button type="button" class="btn btn-success pull-right" id="zhuce">提交</button>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<script>
		var body = $('.panel-body');
		var form=$('form');
		$('.alert-success').hide();

		form.validate({
			rules:{
				name:{
					required:true
				},
				login:{
					required:true
				},
				password:{
					required:true
				}
			},
			messages:{
				name:{
					required:function () {
						body.showAlert('昵称不能为空')
					}
				},
				login:{
					required:function () {
						body.showAlert('账号不能为空')
					}
				},
				password: {
					required:function () {
						body.showAlert('密码不能为空')
					}
				}
			}
		});

		$('#zhuce').click(function(){
			if(!form.valid()){
				return;
			}else {
				$.post('',form.serialize(),function(resp){
					if(resp.status){
						$('.alert-success').show()
						setTimeout(function(){
							location='{:url("Login/login")}'
						},1000)
					}else {
						body.showAlert(resp.message);
					}
				},'json');
			}
		});

		$('#login').click(function () {
			location='{:url("Login/login")}'
		})

	</script>
</body>
</html>